<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>D20 Actuator Remote</title>
<style>
body {
font-family: Arial, Helvetica, sans-serif;
text-align: center;
padding: 20px;
background: #3f933f;
color: #d4e4f7;
min-height: 100vh;
margin: 0;
}
h1 {
margin-bottom: 30px;
font-size: 2.5em;
color: #c1ff31;
}
.button-grid {
display: grid;
grid-template-columns: repeat(5, 1fr);
gap: 10px;
max-width: 500px;
margin: 0 auto;
}
button {
padding: 20px;
font-size: 20px;
font-weight: bold;
border: 3px solid #5c1a33;
background: #d81159;
color: #ffffff;
cursor: pointer;
border-radius: 5px;
transition: all 0.2s ease;
}
button:hover {
background: #6a9bd4;
border-color: #ff6b35;
}
button.active {
background: #c1ff31;
color: #3f933f;
border-color: #ff6b35;
}
#status {
margin-top: 30px;
font-size: 18px;
color: #c1ff31;
font-weight: bold;
}
</style>
</head>
<body>
<h1>D20 Actuator Control</h1>
<div class="button-grid" id="buttonGrid"></div>
<div id="status">Ready</div>
<script>
const grid = document.getElementById('buttonGrid');
const status = document.getElementById('status');
for (let i = 1; i <= 20; i++) {
const btn = document.createElement('button');
btn.textContent = i;
btn.onclick = () => pushFace(i);
grid.appendChild(btn);
}
function pushFace(faceNumber) {
// Remove active class from all buttons
document.querySelectorAll('button').forEach(b => b.classList.remove('active'));
// Add active class to clicked button
event.target.classList.add('active');
// Update status
status.textContent = `Pushing face ${faceNumber}`;
// TODO: Send command to your actuator system here
// Example: fetch(`/push?face=${faceNumber}`);
}
</script>
</body>
</html>